<template>
	<view class="time-header-container">
		<view class="time-header-content">
			<view class="time-header-avatars">
				<image v-for="(avatar, index) in avatars" :key="index" class="avatar" mode="scaleToFill" :src="avatar">
				</image>
			</view>
			<view class="time-content-record">
				<view class="time-record-title">共记录</view>
				<view class="time-record-num">{{ momentCount }}个时刻</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TimeHeader",
		props: {
			avatars: Array,
			momentCount: Number
		}
	}
</script>

<style lang="scss" scoped>
	.time-header-container {
		background: url("https://coder-love.oss-cn-shanghai.aliyuncs.com/time%20banner.gif") no-repeat;
		background-size: cover;
		height: 422rpx;
		position: relative;
		transition: background-image .6s ease-in-out;
		width: 100%;
	}

	.time-header-content {
		bottom: 38rpx;
		justify-content: space-between;
		position: absolute;
		width: 100%;
		z-index: 2;
		display: flex;
	}

	.time-header-avatars {
		margin-left: 40rpx;
	}

	.time-header-avatars>.avatar {
		border: 2rpx solid #fff;
		border-radius: 50%;
		height: 96rpx;
		margin-right: -32rpx;
		width: 96rpx;
	}

	.time-content-record {
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-right: 40rpx;
	}

	.time-content-record {
		font-size: 24rpx;
		line-height: 33rpx;
		margin-bottom: 16rpx;
		text-align: right;
		text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
	}

	.time-record-num {
		font-size: 30rpx;
		line-height: 30rpx;
		text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
	}
</style>
